<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title id="title"></title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<!-- <script type="text/javascript" src="../js/jquery.min.js"></script>
		<script type="text/javascript"  src="../js/echarts.min.js"></script> -->
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/echarts.min.js"></script>
		<script type="text/javascript" src="js/dateMultiFunc.js"></script>
		<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
	</head>
	<body>
		<!-- 体重 血糖 -->
		<div id="tabs">
		  	<!-- 导航栏部分 -->
		  	<ul class="table">
		  		<li class="tabActive">日<p></p></li>
		  		<li>周<p></p></li>
		  		<li>月<p></p></li>
		  		<li>年<p></p></li>
		  	</ul>
			<div class="chartType">
				<span></span>
				<!-- <div>体重(kg)</div> -->
				<input type="date" id="dateSelect" />
				<p onclick="dateMulti()" class="list_time">选择时间</p>
			</div>
			<div id="main"></div>
		  	<!-- 内容区域 -->
		  	<div class="content conAvtive">
				<div class="editCon">
					<div class="title">正常测量</div>
					<div class="editData"></div>
				</div>
				<div class="suijiCon">
					<div class="title">随机测量</div>
					<div class="suijiData"></div>
				</div>
				<div class="suijiData bmiData" style="padding:10px;height:24px;margin-top:10px;display:none;"></div>
				<div class="listRecord" style="margin-bottom:100px">
					<div class="listText1"></div>
					<div class="listInfor">
					</div>
				</div>	
			</div>
		  	<div class="content">
				<div class="jiluCon"></div>
				<div class="editCon">
					<div class="title">正常测量</div>
					<div class="editData"></div>
				</div>
				<div class="suijiCon">
					<div class="title">随机测量</div>
					<div class="suijiData"></div>
				</div>
			</div>
		  	<div class="content">
				<div class="jiluCon"></div>
				<div class="editCon">
					<div class="title">正常测量</div>
					<div class="editData"></div>
				</div>
				<div class="suijiCon">
					<div class="title">随机测量</div>
					<div class="suijiData"></div>
				</div>
			</div>
		  	<div class="content">
				<div class="jiluCon"></div>
				<div class="editCon">
					<div class="title">正常测量</div>
					<div class="editData"></div>
				</div>
				<div class="suijiCon">
					<div class="title">随机测量</div>
					<div class="suijiData"></div>
				</div>
			</div>
		</div>
		<div class="select">
		        <ul>
					<li class="active">空腹</li>
		            <li>早上</li>
		            <li>下午</li>
		            <li>睡前</li>
		            <li>随机</li>
					<li>暂时不选</li>
		        </ul>
		</div>
		<div class="bottom" onclick="goAdd()">
			<div class="submitContent" >添加记录</div>
		</div>
	</body>
	<script>
		let requestPath = 'https://dyf-prod.dyzh120.com/';
		//let requestPath = 'https://dyf-test.dyzh120.com/';
		let tabText = '';
		let tabIndex = 0;
		let name = '';
		let mbTypeId = '';
		let patientId = '';
		let editId = '';
		let selectTime = null;
		let today = '';
		let startTime = null;
		let endTime = null;
		let afterTime = '';
	    // 时间范围
	    function dateMulti() {
	        var dateMulti = new dateMultiFunc({
	            type: 2,
	            maxTime: 0,
	            cancelFunc: function () {
					//$(".bottom").show();
	            },
	            confirmFunc: function (res) {
	                listCon(res, 2)
	            }
	        });
	        dateMulti.show();
	    };
		// 处理时间
		function listCon(res, type) {
		    var html = '';
		    if (type == 2) {
				startTime = res.statrTime.year+'-'+res.statrTime.month+'-'+res.statrTime.today;
				endTime = res.endTime.year+'-'+res.endTime.month+'-'+res.endTime.today;
		        html += "<p>"+startTime+" ~ "+endTime+"</p>";
		    } else {
		        for (var i = 0; i < res.length; i++) {
		            html += "<p>" + JSON.stringify(res[i]) + "</p>";
		        }
		    }
		    var list_con = document.querySelector(".list_time");
		    list_con.innerHTML = html;
			getList(null,mbTypeId,patientId);
			getLog(null,mbTypeId,patientId);
			getAvg(null,mbTypeId,patientId);
		};
		//解析请求地址
		function getQueryParams(url) {
			let params = {};
			let queryString = url ? url.split('?')[1] : window.location.search.slice(1);
			let arr = queryString.split('#')[0].split('&');
			for (let i = 0; i < arr.length; i++) {
				let a = arr[i].split('=');
				let paramName = a[0];
				let paramValue = typeof(a[1]) === 'undefined' ? true : decodeURIComponent(a[1].replace(/\+/g, ' '));
				
				if (params[paramName]) {
					if (Array.isArray(params[paramName])) {
						params[paramName].push(paramValue);
					} else {
						params[paramName] = [params[paramName], paramValue];
					}
				} else {
					params[paramName] = paramValue;
				}
			}
			return params;
		}
		$(function(){
			getUrlParam();
			$('.list_time').hide();
			let date= new Date();
			let day = ("0" + date.getDate()).slice(-2);
			let month = ("0" + (date.getMonth() + 1)).slice(-2);
			today= date.getFullYear() + "-" + (month) + "-" + (day);
			$('#dateSelect').val(today);
		});
		function goAdd(){
			wx.miniProgram.navigateTo({
				url: '/ncd_package/pages/indexNew/indexNew?mbTypeId='+mbTypeId+'&patientId='+patientId+'&name='+name
			});
		}
		//选择时间
		const dateSelect = document.getElementById('dateSelect');
		dateSelect.addEventListener('change', function() {
			selectTime = dateSelect.value;
			getList(null,mbTypeId,patientId);
			getLog(null,mbTypeId,patientId);
			
			getBMI(patientId);
		});
		// 获取URL参数
		function getUrlParam() {
			let url = window.location.href;
			let params = getQueryParams(url);
			name = params['name'];
			mbTypeId = params['mbTypeId'];
			patientId = params['patientId'];
			getList(0,mbTypeId,patientId);
			getLog(0,mbTypeId,patientId);
			let title = '';//页面头部名称
			let chartType = '';//统计图上 名称+单位
			let infor = '';//统计图下 文字描述
			let listText1 = '';//统计图下 文字标题
			if(mbTypeId == 10){
				getBMI(patientId);
				title = '体重';
				chartType = '体重（kg）';
				listText1 += '关于体重数值说明';
				infor += '体重是反应和衡量一个人健康状况的重要标志之一。过胖和过瘦都不利于健康。<br>'+
					'身体质量指数(BMI指数)是国际上衡量人体胖瘦程度以及是否健康的一个常用指标，计算公式为:BMI=体重(千克):身高(米)²<br>'+
					'体重过低：BMI<18.5;<br>'+
					'体重正常：18.5≤BMI<24.0;<br>'+
					'超重：24≤BMI<28.0;<br>'+
					'肥胖：BMI>28.0。'
			}
			$(".chartType span").append(chartType);
			$(".listInfor").append(infor);
			$(".listText1").append(listText1)
			$("#title").append(title)
		}
		$(".table li").on("click", function() {
			var divs = $(".content")
			var lis = $(".table li")
			lis.removeClass('tabActive')
			$(this).addClass('tabActive')
			for (var i = 0; i < lis.length; i ++) {
				if (lis[i] == this) {
					divs.removeClass('conAvtive')
					divs.eq(i).addClass('conAvtive')
				}
			}
			selectTime = null;
			startTime = null;
			endTime = null;
			tabText = $(".table li.tabActive").text();
			if(tabText != '日'){
				tabIndex = $(this).index();
				$('.list_time').html('选择时间');
				getAvg($(this).index(),mbTypeId,patientId);
				getList($(this).index(),mbTypeId,patientId);
				getLog($(this).index(),mbTypeId,patientId);
				$('.bottom').hide();
				$('.list_time').show();
				$('#dateSelect').hide();
			}else{
				getList(0,mbTypeId,patientId);
				getLog(0,mbTypeId,patientId);
				getBMI(patientId);
				$('.list_time').hide();
				$('#dateSelect').show();
				$('.bottom').show();
				$('#dateSelect').val(today);
			}
		})
		function getBMI(patientId){
			if(mbTypeId == 10){
				$(".bmiData").hide();
				$(".bmiData").html('');
				let bmiHtml = '';
				$.ajax({
					url: requestPath+'api/v1/mbData/queryBMI',
					contentType: 'application/json; charset=utf-8',
					type:'get',
					data:{"patientId":patientId},
					success: function(response) {
						if(response.message){
							$(".bmiData").show();
							bmiHtml += '<div style="width:50%;float:left;height:24px">BMI指数</div>'+
									'<div style="width:50%;float:right;height:24px;text-align:right"><b>'+ response.message +'</b></div>'		
							$(".bmiData").append(bmiHtml);
						}
					}
				})
			}else{
				$(".bmiData").hide();
			}
		}
		//获取平均值数据
		function getAvg(type,mbTypeId,patientId){
			let ulHtml = '';
			$(".conAvtive .jiluCon").empty();
			$.ajax({
				url: requestPath+'api/v1/mbData/queryJzDataByType',
				contentType: 'application/json; charset=utf-8',
				type:'post',
				data:JSON.stringify({ type:type,mbTypeId:mbTypeId,patientId:patientId,choseTime:selectTime,startTime:startTime,endTime:endTime,afterTime:afterTime}),
				success: function(response) {
					var result = response.result	
					if(result.max == null || result.max == '' || result.max == 'null'){
						result.max = ''
						result.min = ''
					}
					ulHtml += '<div class="listRecord">'+
							'<div class="listInfordiv">'+
								'<div class="listText">'+$(".table li.tabActive").text()+'度记录</div>'+
							'</div>'+
							'<div class="listNum">'+
								'<div class="listTime">最小</div>'+
								'<div class="listB"><b class="listNumL">'+result.min+'</b>'+result.danwei+'</div>'+
							'</div>'+
							'<div class="line"></div>'+
							'<div class="listNum">'+
								'<div class="listTime">最大</div>'+
								'<div class="listB"><b class="listNumL">'+result.max+'</b>'+result.danwei+'</div>'+
							'</div>'+
						'</div>'
					$(".conAvtive .jiluCon").append(ulHtml);
				}
			})
		}
		//最近一次添加的记录返回
		function getLog(type,mbTypeId,patientId){
			$(".conAvtive .suijiCon").hide();
			let ulHtml = '';
			let suijiHtml = '';
			var suijiArr = [];
			var biaozhunArr = [];
			let remark = ''
			$.ajax({
				url: requestPath+'api/v1/mbData/queryLogLh',
				contentType: 'application/json; charset=utf-8',
				type:'post',
				data:JSON.stringify({type:type,mbTypeId:mbTypeId,patientId:patientId,choseTime:selectTime,startTime:startTime,endTime:endTime,afterTime:afterTime}),
				success: function(response) {
					let result = response.result[0]
					if(response.result.length == 0){
						$(".conAvtive .editCon").hide();
						$(".conAvtive .suijiCon").hide();
					}else{
						if(tabIndex === 0){
							response.result.forEach(function(item, index) {
								if(item.afterTime === "随机"){
									suijiArr.push(response.result[index]);
								}else{
									biaozhunArr.push(response.result[index]);
								}
							});
							//随机数据
							if(suijiArr.length == 0){
								$(".conAvtive .suijiCon").hide();
							}else{
								//判断有没有备注
								if(suijiArr[0].remark != ''){
									remark = '('+suijiArr[0].remark +')'
								}
								suijiHtml += '<div class="editItem" onclick="goEdit(\''+suijiArr[0].id+'\')"><div>' + suijiArr[0].measureTime+'&nbsp;'+suijiArr[0].time+remark+'</div>'+
										'<div><b>'+ suijiArr[0].weight +'</b> kg</div></div>'
								$(".conAvtive .suijiCon .suijiData").append(suijiHtml);
							}
							//标准数据
							if(biaozhunArr.length == 0){
								$(".conAvtive .editCon").hide();
							}else{
								//判断有没有备注
								if(biaozhunArr[0].remark != ''){
									remark = '('+biaozhunArr[0].remark +')'
								}
								ulHtml += '<div class="editItem" onclick="goEdit(\''+biaozhunArr[0].id+'\')"><div>' + biaozhunArr[0].measureTime+'&nbsp;'+biaozhunArr[0].time+remark+'</div>'+
										'<div><b>'+ biaozhunArr[0].weight +'</b> kg</div></div>'
								$(".conAvtive .editCon .editData").append(ulHtml);
							}
 						}else if(tabIndex === 3){
							//$(".conAvtive .editCon").empty();
							response.result.forEach(function(item, index) {
								let remark = ''
								if(item.remark == '' || item.remark == null){
									remark = ''
								}else{
									remark = '('+item.remark +')'
								}
								$(".conAvtive .editCon").show();
								$(".conAvtive .editCon .editData").empty();
								$(".conAvtive .editCon .title").hide();
								ulHtml += '<div class="title" style="padding:10px 0 0">'+item.mouth+'月</div><div class="editItem"><div>' + item.measureTime+'&nbsp;'+item.time+remark+'</div>'+
								 		'<div><b>'+ item.weight +'</b> kg</div></div>'
								$(".conAvtive .editCon .editData").append(ulHtml);
							});
							
						}else{
							response.result.forEach(function(item, index) {
								if(item.afterTime === "随机"){
									suijiArr.push(response.result[index]);
								}else{
									biaozhunArr.push(response.result[index]);
								}
							});
							//随机数据
							if(suijiArr.length == 0){
								$(".conAvtive .suijiCon").hide();
							}else{
								suijiArr.forEach(function(item, index) {
									let remark = ''
									if(item.remark != ''){
										remark = '('+item.remark +')'
									}
									$(".conAvtive .editCon .suijiData").empty();
									suijiHtml += '<div class="editItem"><div>' + item.measureTime+'&nbsp;'+item.time+remark+'</div>'+
									 		'<div><b>'+ item.weight +'</b> kg</div></div>'
									$(".conAvtive .suijiCon .suijiData").append(suijiHtml);
								});
								
							}
							
							//正常数据
							if(biaozhunArr.length == 0){
								$(".conAvtive .editCon").hide();
							}else{
								biaozhunArr.forEach(function(item, index) {
									let remark = ''
									if(item.remark != ''){
										remark = '('+item.remark +')'
									}
									$(".conAvtive .editCon .editData").empty();
									ulHtml += '<div class="editItem"><div>' + item.measureTime+'&nbsp;'+item.time+remark+'</div>'+
											'<div><b>'+ item.weight +'</b> kg</div></div>'
											
									$(".conAvtive .editCon .editData").append(ulHtml);
								});
							}
						}
					}
				}
			})
		}
		//跳转小程序 编辑页面
		function goEdit(id){
			console.log('2',id)
			wx.miniProgram.navigateTo({
				url: '/ncd_package/pages/indexNew/indexNew?mbTypeId='+mbTypeId+'&patientId='+patientId+'&name='+name+'&id='+id
			});
		}
		function getList(type,mbTypeId,patientId){
		    $.ajax({
				url: requestPath+'api/v1/mbData/queryTjByType',
				contentType: 'application/json; charset=utf-8',
				type:'post',
				data:JSON.stringify({ type:type,mbTypeId:mbTypeId,patientId:patientId,choseTime:selectTime,startTime:startTime,endTime:endTime}),
				success: function(response) {
					let resData = response.result.data.map(parseFloat);
					let item = {}
					let newData = []
					let restime = []
					let restime1 = []
					let newSeries = []
					let newTooltip = {}
					
					if(response.result.time.length == 0){
						restime1 = ["3", "6", "9", "12"]
					}else{
						if(type == 3){
							restime1 = response.result.categories
						}else{
							restime = response.result.time
							$.each(restime, function(index, value) {
								restime1[index] = value.substring(5, 10); // 使用substring截取字符串
							});
						}
					}
					resData.forEach(function(val, index) {
						if(val > response.result.biaozhun){
							item = {value: val,date:response.result.data,time:restime[index],daiwei:response.result.danwei,itemStyle: {color: '#FC2249 '}}
						}else{                 
							item = {value: val,date:response.result.data,time:restime[index],daiwei:response.result.danwei,itemStyle: {color: '#07C160'}}
						}
						newData.push(item)
					});
					newSeries = [{
					    data:newData,
					    type: 'line',
						symbol: 'circle', // 设置圆点为实心
						smooth: true,
						connectNulls: false,
					    symbolSize:10,// 点的大小
						roam:false,
						label: {
							show: true,
							position: 'top'
						}
					}]
					
					newTooltip = {
					 	show: true,
					 	trigger: 'item',
					 	formatter: function(params) {
					 		response.result.time.forEach(function(item, index) {
					 			let newIndex =  params.dataIndex
					 			params.danwei = response.result.danwei
					 			params.dataName = response.result.time[newIndex]
					 		});
					 		if(params.value > response.result.biaozhun){
					 			return `<div class="tool" style="background: #FC2249"><p>体重<p><p>${params.dataName}</p><p><strong style="font-size:18px"> ${params.value} </strong> ${params.danwei}</p></div>`;
					 		}else{
					 			return `<div class="tool" style="background: #07C160"><p>体重<p><p>${params.dataName}</p><p><strong style="font-size:18px"> ${params.value} </strong> ${params.danwei}</p></div>`;
					 		} 
					 	},
					 	renderMode: 'html', // 浮层的渲染模式，默认以 'html 即额外的 DOM 节点展示 tooltip；
					 	backgroundColor:'none', // 提示框浮层的背景颜色。
					 	borderColor: 'none', // 提示框浮层的边框颜色。
					 	borderWidth: 0, // 提示框浮层的边框宽。
					 	padding:0, // 提示框浮层内边距，
					 	showDelay: 0,
					 	enterable: false,
					 	renderMode: 'html',
					 	textStyle: {
					 		fontSize:16  // 设置提示框内字体大小
					 	}
					}
					var myChart = echarts.init(document.getElementById('main'));
										 
					// 指定图表的配置项和数据
					var option = {
						grid: {
							left: '0',    // 图表左侧与容器边缘的间距为容器宽度的3%
							right: '5%',   // 图表右侧与容器边缘的间距为容器宽度的4%
							top: '8%',    // 图表顶部与容器边缘的间距为容器高度的10%
							bottom: '5%', // 图表底部与容器边缘的间距为容器高度的10%
							containLabel: true // 是否包含坐标轴的刻度标签
						},
						xAxis: {
							type:'category',
							boundaryGap: false,
							data: restime1,
							axisLabel: {
								alignWithLabel: true,
								textStyle: {
									fontSize:14  // 设置X轴标签字体大小
								}
							}
						},
						yAxis: {
							type: 'value',
							min:0,
							max:response.result.max,
							axisLabel: {
								textStyle: {
									fontSize:14  // 设置X轴标签字体大小
								}
							},
							splitLine: {
								show: false // 关闭背景线
							}
						},
						tooltip:newTooltip,
						series: newSeries
					};
					 
					// 使用刚指定的配置项和数据显示图表。
					myChart.setOption(option)
				},
		      error: function(xhr, status, error) {
		        // 处理错误
		      }
		    });
		};
	</script>
	<style>
		*{margin:0;padding:0;}
		body{
			background-color: #F7F8FA;
			font-family:PingFang, Arial,'Microsoft YaHei', '微软雅黑';
		}
		.table {
			width:100%;
			height:48px;
			display: flex;
			background: #fff;
			position: fixed;
			left: 0;
			top: 0;
			z-index:999;
		}
		.table li {
			width: 25%;
			text-align: center;
			list-style: none;
			cursor: pointer;
			font-weight:bold;
			font-size:14px;
			color:#19191A;
			line-height:48px;
			float: left;
			text-align:center;
		}
		.table li.tabActive {
			color: #1971ff;
		}
		.tabActive p{
			width:28px;
			height:2px;
			background:#1971ff;
			margin:-2px auto 0;
		}
		.chartType{
			display: flex;
			flex-direction: row;
			justify-content:space-between;
			align-items: center;
			font-weight: 600;
			font-size:16px;
			color: #19191A;
			line-height:40px;
			margin:50px 10px 0 10px;
		}
		.chartType input{
			float:right;
			font-size: 14px;
			background: #FFFFFF;
			border-radius:4px;
			border:1px solid #DCDEE0;
			text-align: left;
			font-family: PingFang SC,PingFang SC;
			font-weight: 400;
			color: #323233;
			height: 30px;
			padding:0 10px;
		}
		#main{
			width:calc(100% - 20px);
			height:280px;
			background:#fff;
			border-radius:5px;
			margin: 0 10px;
		}
		/* 图表下面 */
		.content {
			display: none;
			margin-bottom:200px;
		}
		.conAvtive {
			width:calc(100% - 20px);
			margin:10px;
			display: block;
			margin-bottom:100px;
		}
		.conAvtive ,.jiluCon{
			margin-bottom: 10px;
		}
		.content .listRecord:nth-child(2){
			display: none;
		}
		.listRecord{
			width:calc(100% - 20px);
			background: #FFF;
			border-radius:5px;
			padding:10px;
			margin-top:10px;
		}
		.listInfor{
			width:100%;
			font-size:16px;
			line-height:32px;
			word-break: break-all;
			white-space: normal;
		}
		.editCon,.suijiCon{
			width:100%;
			background-color:#fff;
			border-radius:5px;
			margin-bottom:10px;
		}
		.editCon .title,.suijiCon .title{
			padding:10px 10px 0;
			font-family: PingFang SC, PingFang SC;
			font-weight: 1000;
			font-size: 16px;
			color: #19191A;
		}
		.editData,.suijiData{
			padding:0 10px;
			font-family: PingFang SC, PingFang SC;
			font-size:16px;
			color: #19191A;
			line-height:24px;
			background:#fff;
			font-weight: 500;
		}
		.editItem{
			width: 100%;
			padding: 10px 0;
			font-size: 16px;
			color: #19191A;
			line-height: 24px;
			margin-bottom: 10px;
			display: flex;
			justify-content: space-between;
			border-bottom:1px solid #DCDEE0;
		}
		.editItem div:first-child{
			width:60%;
			overflow: hidden;
		}
		.editData :last-child,.suijiData :last-child{
			border-bottom:none;
		}
		.suijiCon h6{
			width:100%;
			padding:10px 10px 3px;
			font-family: PingFang SC, PingFang SC;
			font-size:18px;
			color: #19191A;
			line-height:24px;
			margin-top:10px;
			font-weight:bold;
		}
		/* 图表下面的描述 */
		.listText1 {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight:1000;
			font-size:16px;
			color: #19191A;
			margin-bottom:5px;
		}
		.listInforView{display: flex;flex-direction: row;justify-content: space-between;align-items: center;}
		.listText {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight:1000;
			font-size:16px;
			color: #19191A;
			height:40px;
			line-height:40px;
		}
		/* 年度记录 */
		.listNum{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}
		.line{
			width:100%;
			height:1px;
			margin:5px 0;
			background-color: #E3E4E6;
		}
		.listTime{
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size:14px;
			color: #000000;
			height:40px;
		}
		.listNumL{
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size:16px;
			color: #000000;
			line-height:45px;
			height:40px;
			margin-right:5px
		}
		.listB{
			display: flex;
			font-size:16px;
			color: #000000;
			line-height:50px;
			height:40px;
		}
		/* 图标提示 */
		.tool{
			padding:10px 15px;
			border-radius:5px;
		}
		.tool p{
			line-height:22px;
		}
		.bottom{
			width:100%;
			position: fixed;
			left: 0;
			bottom:0;
			right: 0;
			padding-bottom:10px;
			z-index:999;
			background-color: #FFF;
		}
		.submitContent {
			background-color: #1971FF;
			display: flex;
			height:40px;
			width:calc(100% - 60px);
			font-size:14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			line-height: 40px;
			justify-content: center;
			align-items: center;
			border-radius:5px;
			text-align: center;
			margin:10px auto;
		}
		.select{
			width:100%;
			position: fixed;
			left: 0;
			bottom:0;
			right: 0;
			padding-bottom:10px;
			z-index:9999;
			background-color: #FFF;
			display:none;
		}
		.select ul{
			width:100%;
			background-color: #FFF;
			padding:15px 0;
		}
		.select ul li{
			width:100%;
			padding:10px 0;
			text-align: center;
			color: #323233;
			font-size:16px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			background-color: #FFF;
		}
		</style>
	</html>